<script setup lang="ts">
import Success from "../components/success.vue";
import { ref } from "vue";
import mInput from '@/pages/login/components/m-input.vue';
import {addSubOrderApi, updateSubOrderApi} from "@/api/home";
import {onLoad} from "@dcloudio/uni-app";
const isShow = ref(true);
const projectData = ref({
  title: "",
  price:"",
  desc: ""
})

const addSubOrder = async () => {
  const res = await addSubOrderApi({
    "projectId": projectId.value,
    "requirementDescription": projectData.value.desc,
    "title": projectData.value.title,
    "totalPrice": projectData.value.price,
  })
  if (res?.code === 200) {
    isShow.value = false;
  }
}

const updateSubOrder = async () => {
  const res = await updateSubOrderApi({
    "projectId": projectId.value,
    "requirementDescription": projectData.value.desc,
    "title": projectData.value.title,
    "totalPrice": projectData.value.price,
    id: id.value
  })
  if (res?.code === 200) {
    isShow.value = false;
  }
}

const projectId = ref("");
let id = ref("")
onLoad((options): void => {
  console.log(1)
  projectId.value = options?.projectId || "";
  if (options?.update) {
    const subOrderData = uni.getStorageSync("subOrderData");
    projectData.value = {
      title: subOrderData.title,
      price: subOrderData.totalPrice,
      desc: subOrderData.requirementDescription,
    };
    id.value = subOrderData.id;
  } else {
    id.value = "";
  }
})

</script>

<template>
 <view>
   <Success v-if="!isShow" :id="id"></Success>
   <view class="cu-card margin-top-sm" v-if="isShow">
     <view class="title">
       <text>服务信息</text>
     </view>
     <view class="cu-list menu mt-4">
       <view class="cu-item">
         <view class="content1">新增服务名称</view>
         <m-input ref="account" v-model="projectData.title" title="微信号"
                  placeholder="请输入服务名称"></m-input>
       </view>
       <view class="cu-item">
         <view class="content1">价格收费(元)</view>
         <view style="display: flex; align-items: center">
           <m-input ref="account" v-model="projectData.price" title="微信号"
                    placeholder="请输入价格"></m-input>

         </view>
       </view>
       <view class="cu-item">
         <view class="content1">服务描述</view>
       </view>
       <view class="cu-form-group-box">
         <textarea :maxlength="500" v-model="projectData.desc" placeholder="请输入服务描述" class="desc-text"></textarea>
       </view>
     </view>
   </view>
   <view v-if="isShow">
     <view v-if="id === ''" class="bottom-btn" @click="addSubOrder">
       确认
     </view>
     <view class="bottom-btn" v-else @click="updateSubOrder">
       修改
     </view>
   </view>
 </view>
</template>

<style scoped lang="scss">
.cu-card {
  margin: 15px !important;
  border-radius: 16rpx;
  background-color: #fff;
  padding-bottom: 20rpx;
  .title {
    margin-left: 44rpx;
    margin-top: 40rpx;
    color: #333333;
    font-size: 32rpx;
  }
  .content1 {
    margin-left: 14rpx;
    color: #999999;
    font-size: 32rpx;
    width: 200rpx;
  }
  .cu-item {
    //justify-content: left !important;
  }
  .cu-item:after {
    border-bottom: 0px !important;
  }
  .cu-form-group-box {
    margin: 0 10px;
    background: #FAFAFA;
    padding: 15px;
    border-radius: 5px;
  }
}
.bottom-btn {
  position: fixed;
  background: #4B7BF5;
  height: 52px;
  border-radius: 52rpx;
  color: #fff;
  font-size: 40rpx;
  bottom: 30rpx;
  width: calc(100% - 32rpx);
  left: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>